<template>
  <basic-container class="user">
    <div class="user__containter flex">
      <div class="user__tree">
        <avue-tree
          ref="tree"
          :option="treeOption"
          :data="treeData"
          @node-click="nodeClick"
        >
          <span
            slot-scope="{ node }"
            class="el-tree-node__label"
          >
            <span>{{ node.label }}</span>
          </span>
        </avue-tree>
      </div>
      <div class="user__main flex-1">
        <avue-crud
          ref="crud"
          v-model="form"
          :page.sync="page"
          :data="tableData"
          :table-loading="tableLoading"
          :option="tableOption"
          :before-open="beforeOpen"
          @search-change="searchChange"
          @size-change="sizeChange"
          @current-change="currentChange"
          @search-reset="searchReset"
          @row-update="handleUpdate"
          @row-save="handleSave"
          @row-del="handleDelete"
        >
          <template v-slot:menu="{ row, index }">
            <el-button
              type="text"
              size="small"
              icon="el-icon-menu"
              @click="handleOpenOption(row, index)"
            >
              关联徽章任务
            </el-button>
          </template>
        </avue-crud>
        <option-dialog
          :task-id="id"
          :visible.sync="optionDialogVisible"
        />
      </div>
    </div>
  </basic-container>
</template>

<script>
import { tableOption } from '@/const/crud/customer-system/badge';
import {
  addTask,
  getModuleList,
  getTaskList,
  editTask,
  deleteTask,
} from '@/api/core/badge';
import optionDialog from './components/optionDialog.vue';
import crudMixins from '@/mixins/crud';
import { MODULE_LIST } from '@/const/type';
export default {
  name: 'Badge',
  components: {
    optionDialog,
  },
  mixins: [crudMixins],
  data() {
    return {
      tableOption: tableOption(),
      form: {},
      treeData: [],
      treeOption: {
        nodeKey: 'module',
        addBtn: false,
        menu: false,
        props: {
          label: 'label',
          value: 'module',
        },
      },
      optionDialogVisible: false,
      module: '',
      attributeCode: '',
      attributeName: '',
      id: null,
    };
  },
  watch: {
    'form.module'(newVal, oldVal) {
      if (newVal !== oldVal && oldVal) {
        this.form.type = '';
      }
    },
  },
  created() {
    this.getTreeData();
  },
  methods: {
    // 获取列表
    async getList(page, refresh) {
      if (refresh) {
        this.page.current = 1;
        this.page.currentPage = 1;
      }
      try {
        this.tableLoading = true;
        const { data } = await getTaskList({
          module: this.module,
          size: this.page.pageSize,
          current: this.page.currentPage,
          ...this.searchForm,
        });
        this.tableData = data.data.records;
        this.page.total = data.data.total;
        this.tableLoading = false;
      } catch (error) {
        this.tableLoading = false;
        throw new Error(error);
      }
    },
    // 获取徽章树数据
    async getTreeData() {
      try {
        const { data } = await getModuleList();
        this.treeData = data.data;
        console.log('111111', this.treeData);
        if (data.data.length > 0) {
          // 等待渲染完成后。默认选中第一个节点
          data.data.forEach((el) => {
            el.label = MODULE_LIST.find((v) => v.value === el.module).label;
          });
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(
              data.data[0][this.treeOption.nodeKey]
            );
          });
          // 默认选中第一个节点
          this.nodeClick(data.data[0]);
        }
      } catch (error) {
        throw new Error(error);
      }
    },
    // 编辑
    async handleUpdate(row, index, done, loading) {
      const params = {
        ...row,
      };
      try {
        await editTask(params);
        done();
        this.$message.success('操作成功');
        // this.getList(this.page, true);
        this.getTreeData();
      } catch (error) {
        loading();
        throw new Error(error);
      }
    },
    // 保存
    async handleSave(row, done, loading) {
      try {
        await addTask(row);
        done();
        this.$message.success('操作成功');
        // this.getList(this.page, true);
        this.getTreeData();
      } catch (error) {
        loading();
        throw new Error(error);
      }
    },
    // 删除
    handleDelete: function (row, index) {
      this.$confirm('是否确认删除该任务类型!', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        await deleteTask(row.id);
        this.$message.success('删除成功');
        this.getList(this.page, true);
      });
    },
    // 打开前的拦截
    beforeOpen(done) {
      // this.form.module = this.module;
      done();
    },
    nodeClick(data) {
      this.module = data.module;
      this.getList(this.page, true);
    },

    // 打开属性项
    handleOpenOption(row, index) {
      console.log('rororo', row);
      this.optionDialogVisible = true;
      this.id = row.id;
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-classify {
  .el-collapse-item__header {
    margin-bottom: 0;
  }
  .avue-upload {
    position: absolute;
    width: 100%;
  }
}
.user {
  ::v-deep {
    .el-card__body {
      overflow: hidden;
    }
  }

  &__containter {
    height: 100%;
  }

  &__tree {
    width: 300px;
    padding-top: 3px;
    padding-right: 20px;
    box-sizing: border-box;
    height: 100%;
    flex-shrink: 0;
    ::v-deep {
      .el-tree-node__content {
        height: 40px;
      }
      .el-tree-node__label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  &__main {
    overflow: auto;
    .el-card__body {
      padding-top: 0;
    }
  }
}
</style>
